<template>
  <div class="rank-list side" :style="{ background: color }">
    <div id="head" class="f-sb-fe" :style="{ background: color }">
      <h2 :style="{ color: color }">{{title}}</h2>
      <el-select
        v-model="currBrand"
        style="width: 110px"
        size="mini"
        placeholder="选择品牌"
      >
        <el-option
          v-for="(item, ind) in 4"
          :key="ind"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div id="body">
      <line-list v-for="(item, ind) in 5" :key="ind"></line-list>
    </div>
    <div id="foot">
      <el-pagination
        small
        background
        layout="sizes, prev, pager, next"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :curr-page="currPage"
        :pager-count="5"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import LineList from "../side/LineList.vue";
// import { brands } from "../assets/js/options.js";
export default {
  components: { LineList },
  name: "rankList",
  props: {
    title:{
      type: String,
      default: "最热"
    },
    color:{
      type: String,
      default: "red"
    }
  },
  data() {
    return {
      currPage: 5,
      pageSize: 5,
      currBrand: "",
      // brands: [],
      // color: "red",
      total: 45
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    pageSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    currPageChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    // this.brands=brands;
  },
};
</script>
<style lang="scss" scoped>
.rank-list {
  border: 1px solid $hot-color;
  box-sizing: border-box;
  border-radius: $border-radius-base;
  overflow: hidden;
  padding: 6px 3px;
  // background: $hot-color;
}
#head {
  // background: red;
  h2 {
    color: $hot-color;
    font-size: 18px;
    line-height: 30px;
    padding: 0.1em 1em;
    border-radius: 5px 5px 0 0;
    background: #ffffff;
  }
  .el-select {
    margin-bottom: 2px;
  }
}
#body {
  padding: 10px;
  border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
  background: #ffffff;
}
#foot {
  padding: 10px 0;
  margin-top: 3px;
  border-radius: $border-radius-base;
  background: #ffffff;
}
</style>